<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            background: aqua;
        }
    </style>
</head>
<body>
    <button>添加</button>
    <button>解绑</button>
    <div>
        <p>嘿嘿</p>
    </div>
    <script src="js/jquery-3.2.1.js"></script>
    <script>
        /* 
            事件的绑定:
                .on(a,b,c,d)
            a:事件类型
            b:当前元素的后代，如果出现了这个参数  那么事件是给这个参数加的，如果没出现，事件是给获取的元素加的
            c:规定传到函数中的额外数据  e.data
            d:回调函数
        
        */
       $('button').eq(0).on('click', function(){
            $('p').css('color', 'blue')
       })

    //    $('div').on('click', 'p', function(){
    //         $(this).remove()
    //    })

    var money = {
        name: "老八"
    }

    $('div').on('click', money, function(e){
        console.log(e.data)
        // trigger()用来触发其他元素的事件
        // $('button').eq(0).trigger('click')
        // $('button').eq(0).click()
    })

    // 事件解绑 off()
    $('button').eq(1).click(function(){
        $('button').eq(0).off()
    })
    </script>
</body>
</html>